<template>
<div class="home">
  <el-container class="container">
   <!-- <el-header class="header">
      <span>
      神舟航天软件
    </span>
    </el-header>-->
    <el-main class="main">
      <div class="tab">
        <div class="backLog">
          <img src="../../static/image/backLog.png" alt="">
          &nbsp;&nbsp;<span>今日待办·</span>
          <span>4</span>
        </div>
        <div class="schedule">
          <img src="../../static/image/schedule.png" alt="">
          &nbsp;&nbsp;<span>今日日程·</span>
          <span>6</span>
        </div>
        <div style="clear: both"></div>
      </div>
      <div class="contentBox">
        <div class="news">
          <div class="carousel">
            <el-carousel height="150px" @change="currentCarousel">
              <el-carousel-item v-for="(item,index) in carouseArr" :key="index">
                <img :src="item.imgUrl" alt="" style="width: 100%">
              </el-carousel-item>
            </el-carousel>
            <p class="carouselText" style="margin-top: 14px">
              {{carouselTex}}
            </p>
          </div>
        </div>
        <div class="taskBox">
          <div class="taskBox_header">
            <p class="taskText">
              待办任务
            </p>
            <div class="taskTab">
              <ul>
                <li :class="{active:fristActive}" @click="toggle('frist')">待审批·4</li>
                <li :class="{active:secondActive}" @click="toggle('second')">已审批</li>
                <li :class="{active:thirdActive}" @click="toggle('third')">已完结</li>
              </ul>
            </div>
            <p style="clear: both"></p>
          </div>
          <div class="taskBox_main">
            <ul class="taskBox_main_list">
              <li>
                <div>
                  <p>2020在勤学善思中某科学发展</p>
                  <p>申请人：张珊</p>
                </div>
                <div>
                  <p>2分钟前</p>
                </div>
              </li>
              <li>
                <div>
                  <p>2020在勤学善思中某科学发展</p>
                  <p>申请人：张珊</p>
                </div>
                <div>
                  <p>2分钟前</p>
                </div>
              </li>
              <li>
                <div>
                  <p>2020在勤学善思中某科学发展</p>
                  <p>申请人：张珊</p>
                </div>
                <div>
                  <p>2分钟前</p>
                </div>
              </li>
              <li>
                <div>
                  <p>2020在勤学善思中某科学发展</p>
                  <p>申请人：张珊</p>
                </div>
                <div>
                  <p>2分钟前</p>
                </div>
              </li>
            </ul>
            <div style="clear: both"></div>
          </div>
        </div>
        <div class="dateBox">
          <div class="dateBox_header">
            <div class="title">
              日程
            </div>
            <div class="dateSelect">
              <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
              </van-dropdown-menu>
            </div>
            <div class="dateBtn">
              <van-button type="default">创建</van-button>
              <van-button type="default">日程</van-button>
            </div>
          </div>
          <div class="dateBox_main">
            <!--<van-calendar
              :poppable="false"
              :show-confirm="false"
              :show-title="false"
              :show-subtitle="false"
              :show-mark= 'false'
              :row-height="40"
              color="#00A7A3"
              :formatter="formatter"
              :min-date="minDate"
              :max-date="maxDate"
            />-->
            <div class="weekName">
              <span>一</span>
              <span>二</span>
              <span>三</span>
              <span>四</span>
              <span>五</span>
              <span>六</span>
              <span>日</span>
            </div>
            <div class="dateBody">
              <div class="date_row" v-for="(item,index) in times" :key="index">
                <div class="date_item" v-for="(item1,index1) in item.days" :key="index1">
                  <span :class="{dateActive:item1.isActive}" @click="clickDay(item1)">{{item1.day}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chartsBox">
          <div class="chartsBox_title">当月业务办理比例</div>
          <div class="chartsBox_main">
            <pie  type='hollow' :currIdName="'pie_1'"   :isEmpty='false'
                  :total='100'
                  :dataList='dataLists' />
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</div>
</template>

<script>
  import pie from '../components/Pie'
    export default {
        name: "index",
        data(){
          return {
            value1: 0,
            option1: [
              { text: '2020年6月', value: 0 },
              { text: '2020年7月', value: 1 },
              { text: '2020年8月', value: 2 },
            ],
            carouseArr:[
              {imgUrl:'./static/image/1.png',text:'1:集团公司党组副书记方向明一行调研指导神软'},
              {imgUrl:'./static/image/2.jpg',text:'2:集团公司党组副书记方向明一行调研指导神软'},
              {imgUrl:'./static/image/3.jpg',text:'3:集团公司党组副书记方向明一行调研指导神软'},
            ],
            carouselTex: '',
            fristActive:true,
            secondActive:false,
            thirdActive:false,
            dataLists:[{
              name:'test',
              value:20
            },{
              name:'test1',
              value:60
            },{
              name:'test2',
              value:20
            }],
            weeks:[],
            times:[]
          }
        },
      components:{
        pie
      },
      created() {
          this.carouselTex = this.carouseArr[0].text
        let year = new Date().getFullYear()
        let month = new Date().getMonth() + 1
        let weekCount = this.getWeeks(year,month)
        this.times = this.formatData(year,month,weekCount)

      },
      methods:{
        formatData(year,month,weekCount){
         for(let i = 1; i<=weekCount;i++){
           let days = this.getWeekTime(year,month,i)
           let item= {weekNum:i,days}
           this.weeks.push(item)
         }
         return this.weeks
        },
        getWeeks(year, month) {
          let d = new Date();
          // 该月第一天
          d.setFullYear(year, month-1, 1);
          let w1 = d.getDay();
          if (w1 === 0) w1 = 7;
          // 该月天数
          d.setFullYear(year, month, 0);
          let dd = d.getDate();
          // 第一个周一
          let d1;
          if (w1 !== 1) d1 = 7 - w1 + 2;
          else d1 = 1;
          let week_count = Math.ceil((dd-d1+1)/7);
          return week_count;
        },
        getWeekTime(year, month,weekday) {
          let weekItems = []
          let d = new Date();
          // 该月第一天
          d.setFullYear(year, month-1, 1);
          let w1 = d.getDay();
          if (w1 === 0) w1 = 7;
          // 该月天数
          d.setFullYear(year, month, 0);
          let dd = d.getDate();
          // 第一个周一
          let d1;
          if (w1 !== 1) d1 = 7 - w1 + 2;
          else d1 = 1;
          let monday = d1+(weekday-1)*7;
          let sunday = monday + 6;
          let from =monday;
          let to;
          if (sunday <= dd) {
            to = sunday;
          } else {
            d.setFullYear(year, month-1, sunday);
            let days=d.getDate();
            to =days;
          }
          if(from<to){
            for(let i = from;i<=to;i++){
              let curDay = new Date().getDate()
              let item={day:i,isActive:false}
              if(curDay===i){
                item.isActive = true
              }
              weekItems.push(item)
            }
          }else{
           let lastDay = this.getLastDay(year, month)
            for(let i = from;i<=lastDay;i++){
              let curDay = new Date().getDate()
              let item={day:i,isActive:false}
              if(curDay===i){
                item.isActive = true
              }
              weekItems.push(item)
            }
          }

          return weekItems
        },
        getLastDay(year,month) {
          let new_year = year;    //取当前的年份
          let new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
          if(month>12) {
            new_month -=12;        //月份减
            new_year++;            //年份增
          }
          let new_date = new Date(new_year,new_month,1);                //取当年当月中的第一天
          return (new Date(new_date.getTime()-1000*60*60*24)).getDate();//获取当月最后一天日期
        },
        clickDay(items){
          for(let item of this.times){
            let days = item.days
            for(let item1 of days){
              item1.isActive = false
              if(item1.day === items.day){
                item1.isActive = true
              }
            }
          }
        },
         currentCarousel(index){
           this.carouselTex = this.carouseArr[index].text
         },
        toggle(flag){
           if(flag === 'frist'){
               this.fristActive =true,
               this.secondActive=false,
               this.thirdActive=false
           }else if(flag === 'second'){
             this.fristActive =false,
               this.secondActive=true,
               this.thirdActive=false
           }else{
              this.fristActive =false,
               this.secondActive=false,
               this.thirdActive=true
           }
        }
       }
    }
</script>

<style scoped>
  .home{
    height: 100%;
  }
  .container{
    height: 100%;
  }
.header{

  background:rgba(1,66,144,0.96);
  box-shadow:1px 0px 8px 0px rgba(174,171,171,0.5);
  text-align: center;
}
  .header >span{
    font-size: 18px;
    font-family:PingFangSC-Semibold,PingFang SC;
    color:rgba(255,255,255,1);
    font-weight:bold;

    line-height: 60px;
  }
  .backLog>span,.schedule>span{
    font-weight: bold;
  }
  .backLog,.schedule{
    width: 50%;
    height: 60px;
    text-align: center;
    float: left;
    line-height: 60px;
    background:rgba(255,255,255,1);
    font-size: 16px;
    font-weight: bold;
  }
  .backLog>img,.schedule>img{
    width: 10%;
    position: relative;
    top: 4.5px;
    left: 6px;
  }
  .schedule>img{
    width:9%;
    top:3px;
  }
  .backLog>span:last-child,.schedule>span:last-child{
    color: #00A7A3;
  }
  .main{
    padding: 0;
    height: 100%;
  }
  .contentBox{
    overflow-y: scroll;
    height: calc(100% - 60px)
  }
  .news{
    background:rgba(255,255,255,1);
    padding: 15px;
    margin: 15px 0;
    clear: both;
  }
 .news>.carousel >>> .el-carousel__button{
   width: 8px;
   height: 8px;
   border-radius: 8px;
 }


  .taskBox{
    background: #ffffff;
  }
  .taskBox_header{
    height: 40px;
    padding: 0 15px;
    line-height: 40px;
    border-bottom:1px solid rgba(239,239,239,1);;
  }
   .taskText{
     float: left;
     font-size: 16px;
     color:#00A7A3;
     font-weight: bold;
   }
  .taskTab{
    float: right;
    font-size: 14px;
  }
  .taskTab >ul{
    float: left;
  }
  .taskTab >ul >li{
    float: left;
    cursor: pointer;
  }
  .taskTab >ul >li:not(:first-child){
    margin-left: 20px;
  }
  .taskTab >ul >li.active{
   color:#00A7A3;
    border-bottom: 2px solid #00A7A3;
  }
  .taskBox_main>.taskBox_main_list{
    float: left;
    width: calc(100% - 30px);
    padding: 0 15px;
  }
  .taskBox_main>.taskBox_main_list>li{
    float: left;
    width: 100%;
    padding:15px 0;

  }
  .taskBox_main>.taskBox_main_list>li:not(:last-child){
    border-bottom: 1px solid #E5E5E5;
  }
  .taskBox_main>.taskBox_main_list>li>div:first-child{
    float: left;
    line-height: 20px;
  }
  .taskBox_main>.taskBox_main_list>li>div:first-child>p:first-child{
    color:rgba(0,0,0,1);
  }
  .taskBox_main>.taskBox_main_list>li>div:first-child>p:last-child{
    font-size: 12px;
    color: #919191;
  }
  .taskBox_main>.taskBox_main_list>li>div:last-child{
    float: right;
  }
  .taskBox_main>.taskBox_main_list>li>div:last-child>p{
    font-size: 12px;
    color: #919191;
  }
  .chartsBox{
    background: #ffffff;
    margin-top: 15px;
    padding: 0 15px;
  }
  .chartsBox>.chartsBox_title{
    color: #00A7A3;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #E5E5E5;
    padding: 15px 0;
  }
  .dateBox{
    margin-top: 15px;
  }
  .dateBox_header{
    height: 40px;
    padding:0 15px;
    line-height: 40px;
    background: #ffffff;
    border-bottom: 1px solid #D7DADD;
  }
  .dateBox_header>div{
    float: left;
  }
  .dateBox_header>.title{
    font-size: 16px;
    color: #00A7A3;
    font-weight: bold;
    width: 20%;
  }
  .dateSelect{
    height: 100%;
    width: 40%;
  }
  .dateSelect >>> .van-dropdown-menu__bar{
height: 40px;
    box-shadow: none;
  }
  .dateSelect >>> .van-ellipsis {
    font-weight: bold;
    font-size: 14px;
  }
  .dateBox_header>div.dateBtn{
    float: right;
    width: 40%;
    text-align: right;
  }
  .dateBtn >>> .van-button{
    height: 25px;
    font-size: 14px;
  }
  .dateBox_main{
    background: #ffffff;
  }
.dateBox_main >>> .van-calendar__month-title{
  display: none;
}
  .dateBox_main >>> .van-calendar__day{
    font-size: 14px;
  }
  .dateBox_main >>> .van-calendar__selected-day{
    width: 30px;
    height: 30px;
    border-radius: 30px;
  }
  .weekName{
    display: flex;
    border-bottom: 1px solid #D7DADD;
  }
  .weekName>span{
    flex: 1;
    text-align: center;
    font-size: 12px;
    line-height: 30px;
    color: #919191;
  }
  .dateBody{
    display: flex;
    flex-direction: column;
  }
  .date_row{
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  .date_row:not(:last-child){
    border-bottom: 1px solid #D7DADD;
  }
  .date_item{
    text-align: center;
    width: calc(100%/7);
    font-size: 14px;
  }
  .date_item>span{

  }
  .dateActive{
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 20px;
    background: #00A7A3;
    color: #ffffff;
    display: inline-block;
    cursor: pointer;
  },
  .carouselText{
    font-size: 14px;
    font-weight:400;
    color:rgba(0,0,0,1);
    font-family:PingFangSC-Regular,PingFang SC;
  }
</style>
